<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: true, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  viewer.scene.globe.enableLighting = true; // 根据太阳位置开启照明
  viewer.scene.globe.depthTestAgainstTerrain = true; // 开启深度测试
  Cesium.Math.setRandomNumberSeed(3); // 用于设置 Cesium 的随机数生成器的种子值。在某些场景下，你可能希望确保应用中的随机行为在每次运行时都能产生相同的结果，这时可以通过设置随机数种子来实现。

  //设置模拟时间的边界
  var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
  var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

  //确保查看器处于所需的时间
  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  //	Cesium.ClockRange.LOOP_STOP：当时间到达 stopTime 时，时间会停止，模拟不再继续。
  viewer.clock.multiplier = 10;

  //将时间线设置为模拟边界
  viewer.timeline.zoomTo(start, stop);

  //生成具有不同高度的随机圆形图案。
  function computeCirclularFlight(lon, lat, radius) {
    var property = new Cesium.SampledPositionProperty();
    for (var i = 0; i <= 360; i += 45) {
      var radians = Cesium.Math.toRadians(i);
      var time = Cesium.JulianDate.addSeconds(
        start,
        i,
        new Cesium.JulianDate()
      );
      var position = Cesium.Cartesian3.fromDegrees(
        lon + radius * 1.5 * Math.cos(radians),
        lat + radius * Math.sin(radians),
        Cesium.Math.nextRandomNumber() * 500 + 1750
      );
      property.addSample(time, position);

      //Also create a point for each sample we generate.
      viewer.entities.add({
        position: position,
        point: {
          pixelSize: 5,
          color: Cesium.Color.TRANSPARENT,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
        },
      });
    }
    return property;
  }

  //计算实体位置属性
  const position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
  const entity = viewer.entities.add({
    // 将实体可用性设置为与模拟时间相同的间隔
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: stop,
      }),
    ]),
    position: position,
    //Automatically compute orientation based on position movement.
    orientation: new Cesium.VelocityOrientationProperty(position),
    // 加载模型
    model: {
      uri: "/cesiumData/models/CesiumAir/Cesium_Air.glb",
      minimumPixelSize: 64, // 最小像素大小
    },

    //将路径显示为以1秒为单位采样的粉红色线
    path: {
      show: true,
      // leadTime: 0, // 指定要显示的对象前面的秒数
      // trailTime: 180, // 指定要显示的对象后面的秒数
      width: 10,
      resolution: 1, // 指定在对该位置进行采样时要移动的最大秒数
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.YELLOW,
      }),
    },
  });
  entity.position.setInterpolationOptions({
    interpolationDegree: 1, // 获取检索值时要执行的插值度
    // 获取检索值时要使用的插值算法
    // LagrangePolynomialApproximation;LinearApproximation;HermitePolynomialApproximation
    interpolationAlgorithm: Cesium.LinearApproximation,
  });
  // viewer.trackedEntity = entity;
  viewer.zoomTo(
    viewer.entities,
    new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90))
  );
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
